<template>
    <div class="message">
        <ul class="mui-table-view mui-table-view-chevron">
			<li class="mui-table-view-cell mui-media" v-for="mes in mess" :key="mes.id">
				<a class="mui-navigate-right">
                    <span class="mui-badge">{{ mes.messPrice }}</span>
					<img class="mui-media-object mui-pull-left" :src="mes.messImg">
					<div class="mui-media-body">
						{{ mes.messName }}
						<p class='mui-ellipsis'>{{ mes.messText }}</p>
					</div>
				</a>
			</li>
		</ul>
    </div>
</template>

<script>
export default {
    name: "message",
    data() {
        return{
            mess: [] //用来保存获取到的消息数据
        }
    },
    methods: {
        getMess(){
            this.$http.get('http://localhost:8080/static/res/mess.json').then((res)=>{
                this.mess = res.body
            },()=>{
                this.Messmounted()
            })
        },
        Messmounted() { //京东ui插件，操作失败弹窗
            this.$toast.fail('信息获取失败！')
        },
    },
    created() { //生命周期函数，页面还没有渲染，在调用方法等，最早自能在这里调用
        this.getMess()
    }
}
</script>

<style scoped>
    .message{
        width: 100%;
    }
    .mui-media{
        margin-bottom: 5px;
    }
</style>
